<script>
import request from "../../utils/request";
import { showToast } from "../../utils";
import store from "../../store";
import { userActionType } from "../../store/modules/user";

export default {
  name: "index",
  data() {
    return {
      examList: [],
      redirectUrl: "",
    };
  },
  onLoad(query) {
    if (query.redirectUrl) {
      this.redirectUrl = decodeURIComponent(query.redirectUrl);
    }
    //获取考试列表
    request({
      showLoading: true,
      url: "exam/getAllExam",
      method: "post",
    })
      .then((data) => {
        this.examList = data;
      })
      .catch((err) => {
        console.log(err);
        showToast.error(err);
      });
  },
  methods: {
    select(item) {
      request({
        showLoading: true,
        errorHandle: true,
        url: "exam/saveUserSelectExam",
        method: "post",
        data: {
          examId: item.examId,
        },
      }).then(async () => {
        store.commit(userActionType.mutations.examInfo, item);
				await store.dispatch(userActionType.action.refreshUserInfo)
        if (this.redirectUrl) {
          uni.reLaunch({
            url: this.redirectUrl,
          });
        } else {
          uni.navigateBack();
        }
      });
    },
  },
};
</script>

<template>
  <view class="pages">
    <view class="title">请选择考试</view>
    <view class="exam-list">
      <view class="exam-item" v-for="item in examList" :key="item.examId" @click="select(item)">{{ item.examName }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.pages {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .title {
    font-size: 60rpx;
    color: var(--text-color);
  }
  .exam-list {
    margin-top: 100rpx;
    .exam-item {
      height: 100rpx;
      border-radius: 50rpx;
      width: 400rpx;
      border: 1px solid var(--theme-color);
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--theme-color-light);
      color: var(--text-color);
      font-size: 34rpx;
      &:not(:last-child) {
        margin-bottom: 50rpx;
      }
    }
  }
}
</style>
